<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>蓝色星空背景特效</title>
	<style>
		html,
		body {
			height: 99%;
			padding: 0;
			margin: 0;
			overflow: hidden;
		}

		.all {
			width: 100%;
			min-height: 100%;
			background: MidnightBlue;
			position: relative;
		}

		.star {
			width: 2px;
			height: 2px;
			background-color: rgba(255, 255, 255, 1);
			border-radius: 50%;
			background: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
			display: inline-block;
			position: absolute;
		}

		.nebuleuse {
			min-height: 50%;
			height: 50%;
			position: absolute;
			top: 25%;
			background: rgba(255, 255, 255, 0);
		}

		.pink {
			background: radial-gradient(rgba(255, 141, 161, 1), rgba(255, 255, 255, 0));
			width: 3px;
			height: 3px;
		}

		.yellow {
			background: radial-gradient(rgba(255, 255, 117, 1), rgba(255, 255, 255, 0));
			width: 4px;
			height: 4px;
		}

		.naine {
			width: 5px;
			height: 5px;
		}

		.soleil {
			width: 6px;
			height: 6px;
		}

		.novae {
			width: 7px;
			height: 7px;
		}

		.geante {
			width: 17px;
			height: 17px;
			background: radial-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
		}

		@keyframes mymove {
			to {
				top: 100%;
				left: 0;
			}
		}

		.-- {
			animation-name: mymove;
			animation-duration: 2s;
			animation-iteration-count: infinite;
		}
	</style>
</head>

<body>
	<div class="all">
		<div class="star"></div>
	</div>
	<script src="./js/jquery-1.9.1.min.js"></script>
	<script>
		var star = $('.star');
		var galaxie = 777;
		var galaxieTiers = galaxie / 3;
		var galaxieSept = galaxie / 7;
		var galaxieVingtUn = galaxie / 21;
		var galaxieQuarante = galaxie / 40;
		var galaxieSoixante = galaxie / 60;
		for (var i = 0; i < galaxie; i++) {
			star.clone().addClass('' + i + '').appendTo('.all')
		};

		var valeursH = [];
		var valeursW = [];

		$('.star').each(function () {
			var hstar = (Math.random() * 100).toFixed(1);
			var wstar = (Math.random() * 100).toFixed(1);

			if (jQuery.inArray(hstar, valeursH) != -1) {
				var doublonH = valeursH.indexOf(hstar);
				if (valeursW[doublonH] == wstar) {
					$(this).addClass('geante');
				}
			}

			if (hstar <= 50 && wstar <= 50) {
				$(this).addClass('haut-g');
			} else if (hstar >= 50 && wstar <= 50) {
				$(this).addClass('bas-g');
			} else if (hstar <= 50 && wstar >= 50) {
				$(this).addClass('haut-d');
			} else {
				$(this).addClass('bas-d');
			}

			valeursH.push(hstar);
			valeursW.push(wstar);

			$(this).css({ 'top': '' + hstar + '%', 'left': '' + wstar + '%' });

		});



		$('.star').each(function (i) {
			$(this).addClass('pink');
			return i < galaxieTiers;
		});

		$('.star').not('.pink').each(function (i) {
			$(this).addClass('yellow');
			return i < galaxieTiers;
		});

		$('.pink').each(function (i) {
			$(this).addClass('soleil');
			return i < galaxieSept;
		});

		$('.yellow').each(function (i) {
			$(this).addClass('naine');
			return i < galaxieVingtUn;
		});

		$('.pink').each(function (i) {
			$(this).addClass('novae');
			return i < galaxieQuarante;
		});

		$('.yellow').each(function (i) {
			$(this).addClass('novae');
			return i < galaxieSoixante;
		});

		function filante() {
			var t = Math.floor(Math.random() * 100);
			var l = Math.floor(Math.random() * 100);
			return [t, l];
		}

		var first = true;
		setInterval(function () {
			$('.naine').each(function () {
				var trajectoire = filante();
				$(this).animate({
					opacity: Math.random(),
					top: trajectoire[0] + '%',
					left: trajectoire[1] + '%',
					easing: 'easeInOutQuint',
					complete: function () {
						$(this).animate({
							opacity: Math.random(),
							top: trajectoire[0] + '%',
							left: trajectoire[1] + '%',
							easing: 'easeInOutQuint',
						}, Math.floor(Math.random() * 5000))
					}
				}, Math.floor(Math.random() * 5000));
			});
		}, (first ? 0 : 1000));
		first = false;	
	</script>
</body>

</html>